html {
  --border-color: #eee;
  --font-fans: theme("fontFamily.sans");
  --theme-color: var(--auto-theme-color, theme("colors.orange.500"));
  --hover-color: var(--auto-hover-color, theme("colors.zinc.100"));
  --header-height: auto;
  /* Accent color for form controls */
  accent-color: var(--theme-color);

  /* make app like native app in mobile */
  -webkit-tap-highlight-color: transparent;
  /*  for firefox */
  scrollbar-color: var(--theme-color) transparent;
  scrollbar-width: thin;
}

html.dark {
  --border-color: #333;
  --theme-color: var(--auto-theme-color, theme("colors.orange.600"));
}

@media (prefers-color-scheme: dark) {
  html.not(.light) {
    --border-color: #333;
    --theme-color: var(--auto-theme-color, theme("colors.orange.600"));
  }
}

@media (prefers-color-scheme: light) {
  html.not(.dark) {
    --border-color: #eee;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.dark::view-transition-old(root) {
  z-index: 9999;
}

.dark::view-transition-new(root) {
  z-index: 1;
}
